<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: white;
      }

      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
        transition: all linear 300;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      a.words:hover {
        stroke: red;
      }

      @keyframes animKeys {
        0% {
          fill-opacity: 1.0;
        }

        100% {
          fill-opacity: 0.5;
        }
      }

      a.animatedLink {
        animation-name: animKeys;
        animation-iteration-count: infinite;
        animation-duration: 0.5s;
        animation-direction: alternate;
        animation-play-state: paused;
      }

      a.animatedLink:hover {
        animation-play-state: running;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 第十三章 添加交互与属性设置 P177 -->
      <defs>
        <!-- 13.1 a链接 -->
        <g id="alink">
          <a class="words"
             xlink:href="cat.svg">
            <text x="100"
                  y="30"
                  style="font-size: 12pt;">Cat</text>
          </a>
          <a class="shapes"
             xlink:href="http://www.w3.org/SVG/">
            <circle cx="50"
                    cy="70"
                    r="20"
                    style="fill: red;" />
            <rect x="75"
                  y="50"
                  width="40"
                  height="40"
                  style="fill: green;" />
            <path d="M120 90, 140 50, 160 90 Z"
                  style="fill: blue;" />
          </a>
        </g>

        <!-- 13.2 css -->
        <g id="cssAnimate">
          <a class="animatedLink"
             xlink:href="http://www.w3.org/SVG/">
            <circle cx="50"
                    cy="70"
                    r="20"
                    style="fill: red;" />
            <rect x="75"
                  y="50"
                  width="40"
                  height="40"
                  style="fill: green;" />
            <path d="M120 90, 140 50, 160 90 Z"
                  style="fill: blue;" />
          </a>
        </g>

        <!-- 13.3 用户触发的SMIL动画 -->
        <g id="smil">
          <g id="button">
            <rect x="10"
                  y="10"
                  width="40"
                  height="20"
                  rx="4"
                  ry="4"
                  style="fill: #ddd;" />
            <text x="30"
                  y="25"
                  style="text-anchor: middle; font-size: 8pt">Start</text>
          </g>
          <g transform="translate(100, 60)">
            <path d="M-25 -15, 0 -15, 25 15, -25 15 Z"
                  style="stroke: gray; fill: #699;">
              <!-- 动画修改path的属性 -->
              <!-- 当button被点击的时候开始播放动画 -->
              <animateTransform id="trapezoid"
                                attributeName="transform"
                                type="rotate"
                                from="0"
                                to="360"
                                begin="button.click"
                                dur="6s" />
            </path>
          </g>
        </g>

        <!--
          13.4 使用脚本控制svg：
            与操作普通html元素方式一样
        -->
        <!--
          13.4.1 事件概览：
            用户接口事件：
              当元素接受焦点和失去焦点（比如选中和取消选中文本）时会分别触发 focusIn 和 focusOut 事件。当一个元素通过鼠标点击或者键盘操作激活时，会变成 activate 元素。
            鼠标事件：
              当使用指针设备（如鼠标）在某个元素上点击和释放时会分别触发 mousedown 和 mouseup 事件。如果这两个事件在屏幕上的位置相同，则会触发 click 事件。
              当指针设备移动进入某个元素、在元素内移动、从元素中移走时，会分别触发 mouseover、mousemove 和 mouseout 事件。
            DOM 变化（mutation）事件：
              当 DOM（被其他脚本改动导致）变化时，SVG 阅读器会触发一些事件。比如，当一个节点被添加到另一个节点作为子节点时，会触发 DOMNodeInserted 事件；当节点的属性发生变化时，会触发 DOMAttrModified 事件。本书不会详细描述与这些事件有关的内容。
            文档事件：
              当 SVG 阅读器完全解析完文档，并准备好做进一步操作（比如显示到设备上）时，会触发 SVGLoad 事件。当文档被从窗口中移除时，会触发 SVGUnload 事件。当页面正在加载时被突然中止，会触发 SVGAbort 事件。当文档不能正确加载或者脚本执行有错误时，会触发 SVGError 事件。
              当阅读器文档的大小、滚动位置、缩放比例发生变化时，会触发SVGResize、SVGScroll、SVGZoom 事件。
            动画事件：
              动画开始、结束和重复播放时会触发beginEvent、endEvent和repeatEvent事件。
              repeatEvent 在第一次播放时不会触发。
            键盘事件：
              SVG 并没有原生的键盘事件，但是有一些浏览器可能支持 keydown 和 keyup 事件，这是不标准的。
        -->

        <!--
          13.4.2 监听和响应事件
        -->
        <g id="events">
          <circle id="circle"
                  cx="50"
                  cy="50"
                  r="20"
                  style="fill: #ff9; stroke:black; stroke-width: 1" />
        </g>

        <!--
          13.4.3 ~ 13.4.5 修改对象的属性、修改多个对象的属性
            和dom操作类似，这里不做练习
        -->

      </defs>
      <use xlink:href="#alink" />

      <!-- 不生效是为啥 -->
      <use xlink:href="#cssAnimate"
           x="200" />

      <use xlink:href="#smil"
           x="400" />

      <use xlink:href="#events"
           x="50"
           y="200" />





    </svg>

    <script>
      function grow(evt) {
        this.setAttribute('r', 30);
      };
      function shrink(evt) {
        this.setAttribute('r', 20);
      }
      function reStroke(evt) {
        var w = this.style["stroke-width"];
        w = 4 - parseFloat(w); /* toggle between 1 and 3 */
        this.style['stroke-width'] = w;
      }
      var c = document.querySelector("#circle");
      c.addEventListener("mouseenter", grow);
      c.addEventListener("mouseleave", shrink);
      c.addEventListener("click", reStroke);
    </script>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      Renderer();
    </script>
  </body>

</html>
